import { defineComponent, computed } from 'vue'
import { NPopover, NInput, NScrollbar, NEmpty } from 'naive-ui'
import iconEnum from '@/enum/iconEnum'
import type { iconState } from '@/types/system'
import pageStyle from './styles/IconSelector.module.scss'

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const handChange = (e: string) => {
      emit('update:modelValue', e)
    }
    const onColClick = (e: iconState) => {
      emit('update:modelValue', e.icon)
    }

    const iconList = computed(() => {
      if (props.modelValue) {
        return iconEnum.filter((el: iconState) => {
          return (
            el.name.includes(props.modelValue) ||
            el.icon.includes(props.modelValue)
          )
        })
      }
      return iconEnum
    })
    return () => (
      <NPopover trigger='focus' placement='bottom' style={{ width: '500px' }}>
        {{
          trigger: () => (
            <NInput
              value={props.modelValue}
              placeholder='请输入图标key或名称'
              clearable
              onUpdateValue={handChange}
            />
          ),
          default: () => (
            <NScrollbar style={{ height: '400px' }}>
              {iconList.value.length === 0 ? (
                <div style={{ padding: '40px 0 40px 0' }}>
                  <NEmpty description='你什么也找不到' />
                </div>
              ) : (
                <div class={pageStyle.icons}>
                  {iconList.value.map((v: iconState) => (
                    <div
                      class='icons-item hover-shadow'
                      onClick={() => onColClick(v)}
                    >
                      <div class='icon'>
                        <div class={`esayIcon esayIcon-${v.icon}`}></div>
                      </div>
                      <div class='name u-line-1'>{v.name}</div>
                      <div class='name u-line-1'>{v.icon}</div>
                    </div>
                  ))}
                </div>
              )}
            </NScrollbar>
          )
        }}
      </NPopover>
    )
  }
})
